<!--
 * @Description: 第二十一章（transition动画组件） transition生命周期和GSAP
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-17 18:56:48
-->
<template>
  <div>
    <h1>第二十一章（transition动画组件） transition生命周期和GSAP</h1>
    <p>8个生命周期</p>
    <ul>
      <li>@before-enter="beforeEnter" //对应enter-from</li>
      <li>@enter="enter"//对应enter-active</li>
      <li>@after-enter="afterEnter"//对应enter-to</li>
      <li>@enter-cancelled="EnterCancel1led"//显示过度打断</li>
      <li>@before-leave="beforeLeave"//对应leave-from</li>
      <li>@leave="leave"//对应enter-active</li>
      <li>@after-leave="afterLeave"//对应leave-to</li>
      <li>@leave-cancelled="LeaveCancel1led"//离开过度打断</li>
    </ul>

    <div class="container">
      <div>
        <h2>transition生命周期</h2>
        <button @click="flag1 = !flag1">switch</button>
        <Transition
          @before-enter="EnterFrom1"
          @enter="EnterActive1"
          @after-enter="EnterTo1"
          @enter-cancelled="EnterCancel1"
          @before-leave="LeaveFrom1"
          @leave="LeaveActive1"
          @after-leave="LeaveTo1"
          @leave-cancelled="LeaveCancel1"
        >
          <div v-if="flag1" class="box"></div>
        </Transition>
      </div>

      <div>
        <h2>transition生命周期 GSAP</h2>
        <button @click="flag2 = !flag2">switch</button>
        <Transition @before-enter="EnterFrom2" @enter="EnterActive2" @leave="LeaveActive2">
          <div v-if="flag2" class="box"></div>
        </Transition>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import 'animate.css'

const flag1 = ref<boolean>(false)
const flag2 = ref<boolean>(false)

const EnterFrom1 = (el: Element) => {
  console.log('transition生命周期 =====> EnterFrom1 进入之前')
}

const EnterActive1 = (el: Element, done: Function) => {
  console.log('transition生命周期 =====> EnterActive1 进入过度曲线')
  setTimeout(() => {
    done()
  }, 3000)
}

const EnterTo1 = (el: Element) => {
  console.log('transition生命周期 =====> EnterTo1 进入过度完成')
}

const EnterCancel1 = (el: Element) => {
  console.log('transition生命周期 =====> EnterCancel1 进入过度效果被打断......>')
}

const LeaveFrom1 = (el: Element) => {
  console.log('transition生命周期 <===== LeaveFrom1 离开之前')
}

const LeaveActive1 = (el: Element, done: Function) => {
  console.log('transition生命周期 <===== LeaveActive1 离开过度曲线')
  setTimeout(() => {
    done()
  }, 5000)
}

const LeaveTo1 = (el: Element) => {
  console.log('transition生命周期 <===== LeaveTo1 离开过度完成')
}

const LeaveCancel1 = (el: Element) => {
  console.log('transition生命周期 <===== LeaveCancel1 离开过度效果被打断......<')
}

import gsap from 'gsap'

const EnterFrom2 = (el: Element) => {
  gsap.set(el, {
    width: 0,
    height: 0,
  })
}

const EnterActive2 = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: done,
  })
}

const LeaveActive2 = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: done,
  })
}
</script>
<style scoped lang="less">
h1,
h2,
h3 {
  margin: 10px 0;
}

.container {
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  & > div {
    width: 300px;
    height: 300px;
  }
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>
